<template>
	<div class="carsetting">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/teamGoodsList' }">商品列表</el-breadcrumb-item>
			<el-breadcrumb-item>
				商品规格管理
				<span v-if="goodsName != ''">（商品名称：{{ goodsName }}）</span>
			</el-breadcrumb-item>
		</el-breadcrumb>
		<br />
		<div class="contentdiv">
			<div class="span">规格项目：</div>
			<div class="skulist">
				<div class="skuobj" v-for="(skuobj, skuindex) in skulist" v-bind:key="skuindex">
					<div class="skuname">
						<div class="title">规格名：</div>
						<el-select v-model="skuobj.tagsName" placeholder="请选择">
							<el-option v-for="item in skuoptions" :key="item" :label="item" :value="item"></el-option>
						</el-select>
					</div>
					<div class="skuvalue">
						<div class="title">规格值：</div>
						<div class="tagdiv">
							<el-tag
								v-if="tag.delFlag == '0'"
								:key="tagindex"
								v-for="(tag, tagindex) in skuobj.list"
								closable
								:disable-transitions="false"
								@close="handleClose(skuindex, tagindex)"
							>
								{{ tag.skuName }}
							</el-tag>
							<el-input
								class="input-new-tag"
								v-if="skuobj.inputVisible"
								v-model="skuobj.inputValue"
								:ref="'saveTagInput' + skuindex"
								size="small"
								@keyup.enter.native="handleInputConfirm"
								@blur="handleInputConfirm"
							></el-input>
							<el-button v-else class="button-new-tag" size="small" @click="showInput(skuindex)">+ 增加规格值</el-button>
						</div>
					</div>
					<div class="conclose" @click="removeSku(skuindex)">×</div>
				</div>
			</div>
			<div class="addskubtn"><el-button @click="addSku">+ 添加规格项目</el-button></div>
		</div>

		<div class="skutable" v-if="skuDesclist.length > 0">
			<div class="span">
				规格明细：
				<span class="span1"></span>
				<span class="span2" @click="piliangdialog = true">批量设置填充价格等信息</span>
			</div>
			<el-table :data="skuDesclist" max-height="600" cell-class-name="skutable" border style="width: 100%;" empty-text="请先添加规格项目，然后再填写销售规格其他参数">
				<!-- <el-table-column prop="firName" :label="skulist[0].tagsName" width="128"></el-table-column>
				<div v-if="skulist.length>1">
				  <el-table-column prop="secName" :label="skulist[1].tagsName" width="128"></el-table-column>
				</div> -->
				<el-table-column v-for="(item, index) in skulist" :key="index" :label="item.tagsName" width="128">
					<template slot-scope="scope">
						<span v-if="index == 0">{{ scope.row.firName }}</span>
						<span v-if="index == 1">{{ scope.row.secName }}</span>
					</template>
				</el-table-column>
				<el-table-column label="价格(单位分)" label-class-name="afterstar" width="128">
					<template slot-scope="scope">
						<el-input v-model="scope.row.goodsPrice" placeholder="填数字" type="number"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="库存(数量件)" label-class-name="afterstar" width="128">
					<template slot-scope="scope">
						<el-input v-model="scope.row.stock" placeholder="填数字" type="number"></el-input>
					</template>
				</el-table-column>
				<!-- <el-table-column label="一级分佣(百分比)" width="128">
					<template slot-scope="scope">
						<el-input v-model="scope.row.firRate" placeholder="填数字" type="number"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="二级分佣(百分比)" width="128">
					<template slot-scope="scope">
						<el-input v-model="scope.row.secRate" placeholder="填数字" type="number"></el-input>
					</template>
				</el-table-column> -->
				<el-table-column label="状态" width="128">
					<template slot-scope="scope">
						<el-select v-model="scope.row.status" placeholder="请选择">
							<el-option label="上架" :value="0"></el-option>
							<el-option label="下架" :value="1"></el-option>
						</el-select>
					</template>
				</el-table-column>

				<el-table-column label="重量(克)" width="128">
					<template slot-scope="scope">
						<el-input v-model="scope.row.weight" placeholder="填数字" type="number"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="原价(单位分)" width="128">
					<template slot-scope="scope">
						<el-input v-model="scope.row.goodsOriPrice" placeholder="填数字" type="number"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="规格图片" width="128">
					<template slot-scope="scope">
						<el-upload
							class="skuavatar"
							action=""
							:http-request="handleSkuImgSuccess"
							:show-file-list="false"
							:before-upload="beforeAvatarUpload"
							multiple
						>
							<img v-if="scope.row.skuImg" :src="scope.row.skuImg" class="skuavatar" />
							<i v-else class="skuavatar el-icon-plus" @click="setskuIndex(scope.$index)"></i>
						</el-upload>
					</template>
				</el-table-column>
				<el-table-column label="销量" prop="salesVolume" width="128"></el-table-column>
			</el-table>
		</div>

		<div class="tbmg20">
			<el-button type="primary" v-if="loading" :loading="loading">数据加载中</el-button>
			<el-button type="primary" v-if="!loading" @click="submitForm" icon="el-icon-check">保存商品规格</el-button>
		</div>
	</div>
</template>
<script>
import draggable from 'vuedraggable';
export default {
	data() {
		return {
			skuoptions: ['颜色', '尺寸', '规格', '尺码', '款式', '净含量', '种类', '内存', '版本', '套餐', '容量', '系列', '包装', '口味', '产地', '介质', '时间'],
			tagname1: '',
			tagname2: '',
			cownum: 0, //合并相同列
			nowskunum: 0, //当前几层规格
			inputVisible: false,
			inputValue: '',
			formLabelWidth: '138px',
			BASEURL: '',
			businessid: 0,
			skuindex: 0, //规格项目下标
			skuDescindex: 0, //规格明细下标
			goodsid: 0,
			goodsName: '',
			goodsUuid: '',
			heardseal: {},
			delskulist: {
				goodsFirSecReleList: [],
				goodsFirstSkuList: [],
				goodsSecondSkuList: []
			},
			skulist: [], //规格，默认没有，最多两级
			skuDesclist: [], //规格明细
			goodsFirSecReleList: [],
			goodsFirstSkuList: [],
			goodsSecondSkuList: [],
			loading: false,
			piliangdialog: false,
			plobj: {
				key: 'goodsPrice',
				val: ''
			},
			ploptions: [
				{
					value: 'goodsPrice',
					label: '建议零售价'
				},
				{
					value: 'stock',
					label: '库存'
				},
				{
					value: 'weight',
					label: '重量'
				},
				{
					value: 'goodsOriPrice',
					label: '原价格'
				}
			]
		};
	},
	mounted: function() {
		// 一进来就执行
		if (localStorage.getItem('token') == undefined || localStorage.getItem('token') == '' || localStorage.getItem('token') == null) {
			alert('登录凭证失效，请重新登录！');
			this.$router.push({
				name: 'login'
			});
			return false;
		}
		if (this.$route.query.goodsid == undefined || this.$route.query.goodsid == '') {
			alert('登录凭证失效，请重新登录！');
			this.$router.push({
				name: 'login'
			});
			return false;
		}
		this.goodsid = this.$route.query.goodsid;
		this.goodsUuid = this.$route.query.goodsUuid;
		this.goodsName = this.$route.query.goodsName;
		this.selectGoodsTotalSku();
	},
	methods: {
		//批量填充
		piliangclick() {
			if (this.plobj.val == '') {
				this.$message.error('填充值不可为空');
				return false;
			}
			var skuDesclist = this.skuDesclist;
			for (var i = 0; i < skuDesclist.length; i++) {
				skuDesclist[i][this.plobj.key] = this.plobj.val;
			}
			this.plobj.val = '';
			this.piliangdialog = false;
			this.$message.success('填充值成功');
		},
		//删除规格值
		handleClose(skuindex, tagindex) {
			// 查看规格值
			var skuobj = this.skulist[skuindex].list[tagindex];
			//console.log("删除规格值："+JSON.stringify(skuobj))
			if (skuindex == 0) {
				var relelist = this.goodsFirSecReleList.filter(item => {
					return item.firUuid == skuobj.skuUuid && item.id > 0; //筛选出匹配数据
				});
				var goodsFirSecReleList = this.delskulist.goodsFirSecReleList.concat(relelist);
				this.delskulist.goodsFirSecReleList = goodsFirSecReleList;
				var firstlist = this.goodsFirstSkuList.filter(item => {
					return item.skuUuid == skuobj.skuUuid; //筛选出匹配数据
				});
				var goodsFirstSkuList = this.delskulist.goodsFirstSkuList.concat(firstlist);
				this.delskulist.goodsFirstSkuList = goodsFirstSkuList;
				//console.log("删除一级规格值："+JSON.stringify(this.delskulist.goodsFirstSkuList))
				var newlist = this.skuDesclist.filter(item => {
					return item.firUuid != skuobj.skuUuid; //筛选出匹配数据
				});
				// console.log(newlist)
				this.skuDesclist = newlist;
			} else {
				//删除二级规格值
				var relelist = this.goodsFirSecReleList.filter(item => {
					return item.secUuid == skuobj.skuUuid && item.id > 0; //筛选出匹配数据
				});
				var goodsFirSecReleList = this.delskulist.goodsFirSecReleList.concat(relelist);
				this.delskulist.goodsFirSecReleList = goodsFirSecReleList;
				var seclist = this.goodsSecondSkuList.filter(item => {
					return item.skuUuid == skuobj.skuUuid; //筛选出匹配数据
				});
				var goodsSecondSkuList = this.delskulist.goodsSecondSkuList.concat(seclist);
				this.delskulist.goodsSecondSkuList = goodsSecondSkuList;
				var newlist = this.skuDesclist.filter(item => {
					return item.secUuid != skuobj.skuUuid; //筛选出匹配数据
				});
				this.skuDesclist = newlist;
			}
			if (this.skulist[skuindex].list.length == 1) {
				this.delkongsku(skuindex);
			}
			this.skulist[skuindex].list.splice(tagindex, 1);
		},
		///规格项目被删空的处理
		delkongsku(skuindex) {
			var _this = this;
			var skuDesclist = this.skuDesclist;
			if (skuindex == 0) {
				if (this.skulist.length > 1) {
					var seclist = this.skulist[1].list;
					seclist.forEach((item, index, seclist) => {
						// item为arr的元素，index为下标，arr原数组
						var obj = {};
						obj['id'] = 0;
						obj['goodsId'] = _this.goodsid;
						obj['goodsUuid'] = _this.goodsUuid;
						obj['goodsName'] = _this.goodsName;
						obj['firName'] = '';
						obj['firUuid'] = '';
						obj['secUuid'] = item.skuUuid;
						obj['secName'] = item.skuName;
						obj['skuName'] = item.skuName;
						obj['skuImg'] = '';
						obj['goodsPrice'] = '';
						obj['goodsOriPrice'] = '';
						obj['stock'] = 1;
						obj['status'] = 0;
						obj['salesVolume'] = 0;
						obj['weight'] = '';
						obj['firRate'] = '';
						obj['secRate'] = '';
						obj['delFlag'] = '0';
						skuDesclist.push(obj);
					});
					this.skuDesclist = skuDesclist;
				}
			} else {
				var firstlist = this.skulist[0].list;
				firstlist.forEach((item, index, firstlist) => {
					// item为arr的元素，index为下标，arr原数组
					var obj = {};
					obj['id'] = 0;
					obj['goodsId'] = _this.goodsid;
					obj['goodsUuid'] = _this.goodsUuid;
					obj['goodsName'] = _this.goodsName;
					obj['firName'] = item.skuName;
					obj['firUuid'] = item.skuUuid;
					obj['secUuid'] = '';
					obj['secName'] = '';
					obj['skuName'] = item.skuName;
					obj['skuImg'] = '';
					obj['goodsPrice'] = '';
					obj['goodsOriPrice'] = '';
					obj['stock'] = 1;
					obj['status'] = 0;
					obj['salesVolume'] = 0;
					obj['weight'] = '';
					obj['firRate'] = '';
					obj['secRate'] = '';
					obj['delFlag'] = '0';
					skuDesclist.push(obj);
				});
				this.skuDesclist = skuDesclist;
			}
		},
		//规格值聚焦
		showInput(skuindex) {
			this.skuindex = skuindex;
			this.skulist[skuindex].inputVisible = true;
		},
		//增加规格值
		handleInputConfirm() {
			let inputValue = this.skulist[this.skuindex].inputValue;
			console.log(this.skulist)
			if (inputValue) {
				var objindex = this.skulist[this.skuindex].list.findIndex(item => {
					//这里的options就是上面遍历的数据源
					return item.skuName === inputValue; //筛选出匹配数据
				});
				if (objindex < 0) {
					var obj = {};
					obj['id'] = 0;
					obj['goodsId'] = this.goodsid;
					obj['goodsUuid'] = this.goodsUuid;
					obj['skuUuid'] = new Date().getTime() + this.getRanNum();
					obj['skuName'] = inputValue;
					obj['delFlag'] = '0';
					obj['tagsName'] = this.skulist[this.skuindex].tagsName;
					this.skulist[this.skuindex].list.push(obj);
					//更新
					this.updateskulist(obj, inputValue);
				}
			}
			// console.log(this.skulist)
			this.skulist[this.skuindex].inputVisible = false;
			this.skulist[this.skuindex].inputValue = '';
		},
		//四个随机字母
		getRanNum() {
			var result = [];
			for (var i = 0; i < 4; i++) {
				var ranNum = Math.ceil(Math.random() * 25); //生成一个0到25的数字
				//大写字母'A'的ASCII是65,A~Z的ASCII码就是65 + 0~25;然后调用String.fromCharCode()传入ASCII值返回相应的字符并push进数组里
				result.push(String.fromCharCode(65 + ranNum));
			}
			return result.join('');
		},
		/**
		 * 增加规格管理
		 */
		addSku() {
			if (this.skulist.length >= 2) {
				this.$message.error('规格项目最多只能两项');
				return false;
			} else {
				if (this.skulist.length == 1 && this.skulist[0].list.length <= 0) {
					this.$message.error('请先添加一级规格值');
					return false;
				} else {
					var obj = {};
					obj['tagsName'] = '颜色';
					obj['inputVisible'] = false;
					obj['inputValue'] = '';
					obj['list'] = [];
					this.skulist.push(obj);
				}
			}
		},
		// 删除规格项目行
		removeSku(i) {
			var _this = this;
			var list = this.skulist[i].list;
			var skuindex = null;
			if (i == 0) {
				//删除1级，2级变1级，清除旧数据
				if (list.length > 0) {
					_this.delskulist.goodsFirSecReleList = _this.goodsFirSecReleList;
					_this.delskulist.goodsFirstSkuList = _this.goodsFirstSkuList;
					_this.delskulist.goodsSecondSkuList = _this.goodsSecondSkuList;
					_this.skuDesclist = [];
					if (this.skulist.length > 1) {
						//有二级
						skuindex = 1;
					}
				}
			} else {
				//删除2，1级不善
				if (list.length > 0) {
					_this.delskulist.goodsFirSecReleList = _this.goodsFirSecReleList;
					// _this.delskulist.goodsFirstSkuList = _this.goodsFirstSkuList
					_this.delskulist.goodsSecondSkuList = _this.goodsSecondSkuList;
					_this.skuDesclist = [];
					skuindex = 1;
				}
			}
			this.skulist.splice(i, 1);
			if (skuindex == 1) {
				_this.delkongsku(1);
			}
		},
		//规格明细表单处理
		async updateskulist(skuobj, inputValue) {
			var skulist = this.skulist;
			//只有一级规格
			if (skulist.length < 2) {
				var skuDesclist = this.skuDesclist;
				var obj = {};
				obj['id'] = 0;
				obj['goodsId'] = this.goodsid;
				obj['goodsUuid'] = this.goodsUuid;
				obj['goodsName'] = this.goodsName;
				obj['firName'] = skuobj.skuName;
				obj['firUuid'] = skuobj.skuUuid;
				obj['secUuid'] = '';
				obj['secName'] = '';
				obj['skuName'] = skuobj.skuName;
				obj['skuImg'] = '';
				obj['goodsPrice'] = '';
				obj['goodsOriPrice'] = '';
				obj['stock'] = 1;
				obj['status'] = 0;
				obj['salesVolume'] = 0;
				obj['weight'] = '';
				obj['firRate'] = '';
				obj['secRate'] = '';
				obj['delFlag'] = '0';
				skuDesclist.push(obj);
				//合并列
				this.getSpanArr(skuDesclist);
				console.log(skuDesclist);
				this.skuDesclist = skuDesclist;
			} else {
				//判断之前是不是增加了一级规格，现在增加二级
				//重置规格
				var res = await this.initSku();
				if (res) {
					var skuDesclist = this.skuDesclist;
					if (this.skuindex == 0) {
						console.log('增加一级规格值');
						//增加一级规格
						var j = 0;
						for (var i = 0; i < skulist[1].list.length; i++) {
							var obj = {};
							obj['id'] = 0;
							obj['goodsId'] = this.goodsid;
							obj['goodsUuid'] = this.goodsUuid;
							obj['goodsName'] = this.goodsName;
							obj['firName'] = skuobj.skuName;
							obj['firUuid'] = skuobj.skuUuid;
							obj['secUuid'] = skulist[1].list[i].skuUuid;
							obj['secName'] = skulist[1].list[i].skuName;
							obj['skuName'] = skuobj.skuName + ',' + skulist[1].list[i].skuName;
							obj['skuImg'] = '';
							obj['goodsPrice'] = '';
							obj['goodsOriPrice'] = '';
							obj['stock'] = 1;
							obj['status'] = 0;
							obj['salesVolume'] = 0;
							obj['weight'] = '';
							obj['firRate'] = '';
							obj['secRate'] = '';
							obj['delFlag'] = '0';
							if (skulist[0].list.length == 1 && j == 0) {
								// 清空之前的值
								skuDesclist = [];
								j++;
								skuDesclist.push(obj);
							} else {
								skuDesclist.push(obj);
							}
						}
						//合并列
						// console.log(skuDesclist)
						// this.getSpanArr(skuDesclist)
						this.skuDesclist = skuDesclist;
					} else {
						console.log('增加二级规格值');
						//增加二级规格值
						var sku2_length = skulist[1].list.length;
						var k = 0;
						for (var i = 0; i < skulist[0].list.length; i++) {
							var obj = {};
							obj['id'] = 0;
							obj['goodsId'] = this.goodsid;
							obj['goodsUuid'] = this.goodsUuid;
							obj['goodsName'] = this.goodsName;
							obj['firName'] = skulist[0].list[i].skuName;
							obj['firUuid'] = skulist[0].list[i].skuUuid;
							obj['secUuid'] = skuobj.skuUuid;
							obj['secName'] = skuobj.skuName;
							obj['skuName'] = skulist[0].list[i].skuName + ',' + skuobj.skuName;
							obj['skuImg'] = '';
							obj['goodsPrice'] = '';
							obj['goodsOriPrice'] = '';
							obj['stock'] = 1;
							obj['status'] = 0;
							obj['salesVolume'] = 0;
							obj['weight'] = '';
							obj['firRate'] = '';
							obj['secRate'] = '';
							obj['delFlag'] = '0';
							//跳转插入
							if (k == 0 && skulist[1].list.length == 1) {
								// 清空之前的值
								skuDesclist = [];
								k++;
								skuDesclist.splice(sku2_length * (1 + i) - 1 + i, 0, obj);
							} else {
								skuDesclist.splice(sku2_length * (1 + i) - 1 + i, 0, obj);
							}
							// console.log(skuDesclist)
						}
						//合并列
						// this.getSpanArr(skuDesclist)
						this.skuDesclist = skuDesclist;
					}
				}
			}
		},
		//规格重置，删除和剔除
		initSku() {
			var _this = this;
			var skuDesclist = this.skuDesclist;
			var skulist = this.skulist;
			console.log(skulist)
			return new Promise((resolve, reject) => {
				// skuDesclist.forEach((item, index, skuDesclist) => { // item为arr的元素，index为下标，arr原数组
				// 	if(item.id>0){
				// 		_this.delskulist.goodsFirSecReleList.push(item)
				// 	}
				// 	_this.skuDesclist.splice(index,1)
				// });
				//判断之前是不是增加了一级规格，现在增加二级
				// skulist[1].list.length  二级规格值长度
				if (skulist[1].list.length == 1) {
					// console.log("清空,把原来数据增加进去")
					_this.delskulist.goodsFirSecReleList = _this.goodsFirSecReleList;
					//_this.delskulist.goodsFirstSkuList = _this.goodsFirstSkuList
					//_this.delskulist.goodsSecondSkuList = _this.goodsSecondSkuList;
					_this.skuDesclist = [];
					resolve(true);
				} else {
					resolve(true);
				}
			});
		},
		//检查规格
		checkSku() {
			var skuDesclist = this.skuDesclist;
			// console.log(skuDesclist)
			return new Promise((resolve, reject) => {
				for (var i = 0; i < skuDesclist.length; i++) {
					if (!skuDesclist[i].goodsPrice || parseFloat(skuDesclist[i].goodsPrice) <= 0) {
						this.$message.error('规格价格不能为空，并且要大于0');
						resolve(false);
						break;
					}
					if (!skuDesclist[i].stock || parseInt(skuDesclist[i].stock) <= 0) {
						this.$message.error('规格库存不能为空，并且要大于0');
						resolve(false);
						break;
					}
				}
				if (skuDesclist.length <= 0) {
					this.$message.error('请添加规格项目');
					resolve(false);
				}
				resolve(true);
			});
		},
		async submitForm() {
			var rescheck = await this.checkSku();
			if (rescheck) {
				var data = {};
				data['goodsFirSecReleList'] = this.skuDesclist;
				data['goodsFirstSkuList'] = this.skulist[0].list;
				if (this.skulist.length > 1) {
					data['goodsSecondSkuList'] = this.skulist[1].list;
				} else {
					data['goodsSecondSkuList'] = [];
				}
				//this.loading = true;
				console.log('保存规格', data);
				console.log(this.delskulist)
				//return false;
				this.$api.postJson('manager/gen-goods-sku/insertGoodsTotalSku', data, res => {
				    //成功
				    this.$message({
				    	type: 'success',
				    	message: '保存成功!'
				    });
				    this.$router.push({
				    	name: 'teamGoodsList'
				    });
				    //删除其他规格
				    this.delGoodsTotalSku();
				})
			}
		},
		//查询规格，
		selectGoodsTotalSku() {
			var data = {};
			data['currentPage'] = 1;
			data['pageSize'] = 8888;
			data['goodsId'] = this.goodsid;
			//console.log(data);
			this.$api.postJson('manager/gen-goods-sku/selectGoodsTotalSku', data, res => {
			    //处理规格对象
			    this.goodsFirSecReleList = res.data.goodsFirSecReleList;
			    this.goodsFirstSkuList = res.data.goodsFirstSkuList;
			    this.goodsSecondSkuList = res.data.goodsSecondSkuList;
			    this.skuDesclist = this.goodsFirSecReleList;
			    if (this.goodsFirstSkuList.length > 0) {
			    	var obj = {};
			    	obj['tagsName'] = this.goodsFirstSkuList[0].tagsName;
			    	obj['inputVisible'] = false;
			    	obj['inputValue'] = '';
			    	obj['list'] = this.goodsFirstSkuList;
			    	this.skulist.push(obj);
			    }
			    if (this.goodsSecondSkuList.length > 0) {
			    	var obj2 = {};
			    	obj2['tagsName'] = this.goodsSecondSkuList[0].tagsName;
			    	obj2['inputVisible'] = false;
			    	obj2['inputValue'] = '';
			    	obj2['list'] = this.goodsSecondSkuList;
			    	this.skulist.push(obj2);
			    }
			})
		},
		//删除规格
		delGoodsTotalSku() {
			var data = {};
			//过滤一下
			data['goodsFirSecReleList'] = this.delskulist.goodsFirSecReleList.filter(item => {
				return item.id > 0; //筛选出匹配数据
			});
			data['goodsFirstSkuList'] = this.delskulist.goodsFirstSkuList.filter(item => {
				return item.id > 0; //筛选出匹配数据
			});
			data['goodsSecondSkuList'] = this.delskulist.goodsSecondSkuList.filter(item => {
				return item.id > 0; //筛选出匹配数据
			});
			console.log('删除规格', data);
			this.$api.postJson('manager/gen-goods-sku/DeleteGoodsTotalSku', data, res => {
			    
			})
		},
		// retrunback() {
		//   this.$router.go(-1);
		// },
		//规格明细下标
		setskuIndex(skuDescindex) {
			console.log(skuDescindex);
			this.skuDescindex = skuDescindex;
		},
		async handleSkuImgSuccess({ file }) {
			var res = await this.$api.uploadHttp(file, this.$ossClient);
			if (res && res.status == 200) {
				this.skuDesclist[this.skuDescindex].skuImg = res.requestUrls[0];
				this.$message.success('上传图片成功!');
			} else {
				this.$message.error('上传图失败!');
			}
		},
		beforeAvatarUpload(file) {
			console.log(file);
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!');
				return false;
			}
			if (file.type == 'image/jpeg' || file.type == 'image/png') {
				console.log(this.BASEURL);
			} else {
				this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
			}
			// alert()
		},
		//合并行和列
		getSpanArr(data) {
			var cownum = 1;
			for (var i = 0; i < data.length; i++) {
				if (i === 0) {
					this.cownum = 0;
				} else {
					// 判断当前元素与上一个元素是否相同
					if (data[i].firName == data[i - 1].firName) {
						cownum++;
						this.cownum = cownum;
					} else {
						break;
					}
				}
			}
			console.log(this.cownum);
		},
		objectSpanMethod({ row, column, rowIndex, columnIndex }) {
			if (columnIndex === 0) {
				const _row = this.cownum;
				const _col = _row > 0 ? 1 : 0;
				return {
					rowspan: _row,
					colspan: _col
				};
			}
		}
	}
};
</script>
<style lang="less" scoped>
.skuavatar {
	width: 68px;
	height: 68px;
	border: 1px solid #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
}

.skuavatar {
	font-size: 28px;
	color: #8c939d;
	width: 68px;
	height: 68px;
	line-height: 68px;
	text-align: center;
}

.contentdiv {
	background-color: #fff;
	padding: 10px;
	border: 1px solid #e5e5e5;

	.span {
		padding: 10px 0;
	}

	.addskubtn {
		padding: 7px 10px;
		margin-top: 20px;
		background-color: #f8f8f8;
	}

	.skulist {
		.skuobj {
			position: relative;
			font-size: 16px;
			margin-top: 10px;

			.skuname,
			.skuvalue {
				padding: 10px;
				background-color: #f8f8f8;
				display: flex;
				align-items: center;
				align-content: center;
			}

			.conclose {
				position: absolute;
				width: 25px;
				height: 25px;
				color: #ffffff;
				background: hsla(0, 1%, 59%, 0.6);
				border-radius: 50%;
				line-height: 25px;
				text-align: center;
				font-size: 20px;
				right: -5px;
				top: -5px;
				cursor: pointer;
			}
		}
	}
}

.skutable {
	margin-top: 38px;

	.span {
		padding: 10px 0;

		.span1 {
			font-size: 12px;
			color: red;
		}

		.span2 {
			margin-left: 18px;
			font-size: 13px;
			color: #409eff;
			text-decoration: underline;
			cursor: pointer;
		}
	}
}
</style>
